<template>
   <div v-loading="showDialogLoading" class="app-container">
       <div class="big-box">
           <div class="top-box">
               <h3 class="title">报告信息</h3>
                   <el-row :gutter="20" class="mg-bottom-20" >
                       <el-col :span="6"> <div >报告类型：</div></el-col>
                        <el-col :span="18">    
                            <div>
                                <el-radio-group v-model="form.resource">
                                    <el-radio label="年报"></el-radio>
                                    <el-radio label="一季报"></el-radio>
                                    <el-radio label="中报"></el-radio>
                                    <el-radio label="三季报"></el-radio>
                                </el-radio-group>
                            </div>
                         </el-col>
                   </el-row>
                   <el-row :gutter="20">
                    <el-col :span="6"><div>报告日期：</div></el-col>
                    <el-col :span="18"> 
                        <div>
                            <el-date-picker
                                v-model="form.ReportDate"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="timestamp">
                            </el-date-picker>
                        </div>
                    </el-col>
                   </el-row>
           </div>
           <div class="bottom-box">
                   <h4 class="title">每股指标</h4>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">基本每股收益</el-col>
                        <el-col :span="18"><el-input placeholder="请填写基本每股收益" v-model="perData.epsbasic"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">扣非每股收益</el-col>
                        <el-col :span="18"><el-input placeholder="请填写扣非每股收益" v-model="perData.epsdiluted"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">稀释每股收益</el-col>
                        <el-col :span="18"><el-input placeholder="请填写稀释每股收益" v-model="perData.epsexbasic"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">每股净资产</el-col>
                        <el-col :span="18"><el-input placeholder="请填写每股净资产" v-model="perData.bps"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">每股净资产</el-col>
                        <el-col :span="18"><el-input placeholder="请填写每股净资产益" v-model="perData.capitalreserveps"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">每股未分配利润</el-col>
                        <el-col :span="18"><el-input placeholder="请填写每股未分配利润" v-model="perData.undistributedps"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">每股经营现金流</el-col>
                        <el-col :span="18"><el-input placeholder="请填写每股经营现金流" v-model="perData.cfps"></el-input></el-col>
                    </el-row>

                   <h4 class="title">成长能力指标</h4>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">营业收入</el-col>
                        <el-col :span="18"><el-input placeholder="请填写基本每股收益" v-model="growData.income"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">归属净利润</el-col>
                        <el-col :span="18"><el-input placeholder="请填写归属净利润" v-model="growData.netProfit"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">扣非净利润</el-col>
                        <el-col :span="18"><el-input placeholder="请填写扣非净利润" v-model="growData.deductedProfit"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">营业收入同比增长</el-col>
                        <el-col :span="18"><el-input placeholder="请填写营业收入同比增长" v-model="growData.yoyIncome"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">归属净利润同比增长</el-col>
                        <el-col :span="18"><el-input placeholder="请填写归属净利润同比增长" v-model="growData.yoyNetProfit"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">扣非净利润同比增长</el-col>
                        <el-col :span="18"><el-input placeholder="请填写扣非净利润同比增长润" v-model="growData.yoyDedusctedProfit"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">加权净资产收益率</el-col>
                        <el-col :span="18"><el-input placeholder="请填写加权净资产收益率" v-model="growData.roewa"></el-input></el-col>
                    </el-row>

                    <h4 class="title">盈利能力指标</h4>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">加权净资产收益率</el-col>
                        <el-col :span="18"><el-input placeholder="请填写加权净资产收益率" v-model="proData.roewa"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">摊薄净资产收益率</el-col>
                        <el-col :span="18"><el-input placeholder="请填写摊薄净资产收益率" v-model="proData.roediluted"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">销售毛利率</el-col>
                        <el-col :span="18"><el-input placeholder="请填写销售毛利率" v-model="proData.gpmargin"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">销售净利率</el-col>
                        <el-col :span="18"><el-input placeholder="请填写销售净利率" v-model="proData.npmargin"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">实际税率</el-col>
                        <el-col :span="18"><el-input placeholder="请填写实际税率" v-model="proData.taxRate"></el-input></el-col>
                    </el-row>

                    <h4 class="title">运营能力指标</h4>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">总资产周转率(次)</el-col>
                        <el-col :span="18"><el-input placeholder="请填写总资产周转率" v-model="operate.assets"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">应收账款周期(天)</el-col>
                        <el-col :span="18"><el-input placeholder="请填写应收账款周期" v-model="operate.account"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">存货周转天数(天)</el-col>
                        <el-col :span="18"><el-input placeholder="请填写存货周转天数" v-model="operate.stock"></el-input></el-col>
                    </el-row>
                    <h4 class="title">资本结构和偿债能力指标</h4>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">资产负债率</el-col>
                        <el-col :span="18"><el-input placeholder="请填写资产负债率" v-model="capData.debttoassets"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">流动负债/总负债</el-col>
                        <el-col :span="18"><el-input placeholder="请填写流动负债/总负债" v-model="capData.currentDebttodebt"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">流动比率</el-col>
                        <el-col :span="18"><el-input placeholder="请填写流动比率" v-model="capData.currentRatio"></el-input></el-col>
                    </el-row>
                    <el-row :gutter="20" class="mg-bottom-20" >
                        <el-col :span="6">速动比率</el-col>
                        <el-col :span="18"><el-input placeholder="请填写速动比率" v-model="capData.quickRatio"></el-input></el-col>
                    </el-row>
           </div>
       </div>
       <div>
            <el-row :gutter="20">
                <el-col :span="24" >
                    <div style="text-align:center">
                    <el-button type="primary" size="medium " @click="submitForm()">保存</el-button>
                    <el-button size="medium " @click="cancel()">取消</el-button>
                    </div>
                </el-col>
            </el-row>
       </div>
   </div>
</template>
<script>
import { findCompanyFinancialDetailedById} from '@/api/Mycompany/index'
export default {
    data(){
        return{
            showDialogLoading:true,
            form:{
                resource:'',
                ReportDate:''       
            },
              perData:{
                // 每股指标
                epsbasic:'', //基本每股收益
                epsdiluted:'', //扣非每股收益11
                epsexbasic:'', //稀释每股收益
                bps:'', //每股净资产
                capitalreserveps:'', //每股净资产22
                undistributedps:'', //每股未分配利润
                cfps:'', //每股经营现金流
            },
            growData:{
                // 成长能力指标
                income:'', //营业收入
                netProfit:'', //归属净利润
                deductedProfit:'', //扣非净利润
                yoyIncome:'', //营业收入同比增长
                yoyNetProfit:'', //归属净利润同比增长
                yoyDedusctedProfit:'', //扣非净利润同比增长
                roewa:'', //加权净资产收益率
            },
            proData:{
                // 盈利能力指标
                roewa:'', //加权净资产收益率
                roediluted:'', //摊薄净资产收益率
                gpmargin:'', //销售毛利率
                npmargin:'', //销售净利率
                taxRate:'', //实际税率
            },
            capData:{
                //  资本结构和偿债能力指标
                debttoassets:'', //资产负债率
                currentDebttodebt:'', //流动负债/总负债
                currentRatio:'', //流动比率
                quickRatio:'', //速动比率
            },
            operate:{
                // 运营能力指标
                assets:'', //总资产周转率(次)
                account:'', //应收账款周期(天)
                stock:'', //存货周转天数(天)
            }
        }
    },
    mounted(){
        console.log('这是传递的id',this.$route.query.id);
        if(this.$route.query.id !== undefined){
            this.showDetail(this.$route.query.id)
        }else{
             this.showDialogLoading = false
        }
    },
    methods:{
    // 获取财务报告的详细信息
    showDetail(id) {
        const ids = id
        findCompanyFinancialDetailedById({id: ids}).then(res => {
            console.log('res', res)
            if (res.growthAbility && res.growthAbility.length > 0) {
                this.growData = res.growthAbility[0]
            }
            if (res.perShareIndex && res.perShareIndex.length > 0) {
            this.perData = res.perShareIndex[0]
            }
            if (res.profitAbility && res.profitAbility.length > 0) {
                this.proData = res.profitAbility[0]
            }
            if (res.capAbility && res.capAbility.length > 0) {
                this.capData = res.capAbility[0]
            }
            this.showDialogLoading = false
        })
    },
    submitForm(){
        console.log(this.form,this.growData,this.proData,this.capData,this.perData) 
        this.$router.push({ path: '/maintain/company' })
    },
    cancel() {
        this.$router.push({ path: '/maintain/company' })
      },
    }
}
</script>
<style lang="scss" scoped>
  .app-container {
    height: 100%;
    padding:vw(30px);
    box-sizing: border-box;
  }
  .big-box{min-height:vw(600px);max-height: vw(750px);overflow-y: auto;margin-bottom: vw(20px);padding: vw(20px); box-sizing: border-box;min-width:650px; max-width:700px;margin:0 auto;line-height:vw(30px);
    .top-box{min-width: vw(500px);}
    .title{text-align: center}

  }
  .big-box::-webkit-scrollbar{
  padding-right:.5rem
}
  ::v-deep .el-input__inner{
      width: vw(330px);
  }
  
</style>
